//配置指令
import loadingUrl from "@/assets/loading.svg"
import styles from "./loading.module.less"
 function getLoadingImage(el) {
    //得到el中的loading效果的img元素
    return el.querySelector("img[data-role = loading]")
  }

function createLoadingImg() {
  const img = document.createElement("img");
  img.dataset.role = "loading";//自定义属性
  img.src = loadingUrl;
  img.className = styles.loading;
  return img;
}

export default function(el,binding) {
    //根据binding.value的值，决定创建或者删除img元素
    const curImg = getLoadingImage(el);
    if(binding.value) {
      if(!curImg) {
        const img = createLoadingImg();
        el.appendChild(img);
        
      }
    }else  {
      if(curImg) {
        curImg.remove();
      }

    }
  } 
//   bind(el,bingding) {
//     //只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性初始化的设置
//     //el:绑定的真实的dom元素，Bindding 是一个对象，描述了指令中提供的信息
//     //创建一个img元素，放到el元素内部
//   },
//   //inserted() {
//     //被绑定元素插入父节点时调用
//   //},
//   update() {
//     //所有的组件的 Vnode更新时调用
//     //根据binding.value的值，决定创建或者删除img元素
//   }
 
